/**
 * 文章分类管理配置文件
 */

import { Delete, Edit, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { h } from 'vue'
import { ElTag, ElIcon, ElButton } from 'element-plus'
import * as ElementPlusIcons from '@element-plus/icons-vue'

/**
 * 搜索条件配置
 */
export const searchConfig = [
  {
    field: 'name',
    label: '分类名称',
    component: 'Input',
    placeholder: '请输入分类名称',
    defaultValue: '',
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    placeholder: '请选择状态',
    defaultValue: '',
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
  },
  {
    field: 'createTimeRange',
    label: '创建时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  },
  {
    field: 'updateTimeRange',
    label: '修改时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  }
]

/**
 * 表格列配置
 */
export const tableConfig = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left',
    align: 'center',
  },
  {
    type: 'index',
    width: 55,
    label: '序号',
    align: 'center',
  },
  {
    prop: 'name',
    label: '分类名称',
    minWidth: 180,
    width: 200,
    align: 'center',
    render: (row) => {
      const IconComponent = row.icon ? ElementPlusIcons[row.icon] : null
      return h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            justifyContent: 'center',
          },
        },
        [
          IconComponent &&
            h(
              ElIcon,
              {
                size: 18,
                style: {
                  color: '#666',
                },
              },
              () => h(IconComponent),
            ),
          row.name,
        ],
      )
    },
  },
  {
    prop: 'description',
    label: '分类描述',
    minWidth: 180,
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'orderNum',
    label: '排序',
    width: 120,
    align: 'center',
    render: (row) =>
      h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
          },
        },
        [
          h(
            ElButton,
            {
              size: 'small',
              type: 'primary',
              link: true,
              disabled: row.upDisabled,
              onClick: (e) => {
                e.stopPropagation()
                row.onMoveUp?.(row)
              },
            },
            () => h(ElIcon, null, () => h(ArrowUp)),
          ),
          h('span', { 
            style: { 
              margin: '0 8px',
              minWidth: '40px',
              textAlign: 'center'
            } 
          }, row.orderNum),
          h(
            ElButton,
            {
              size: 'small',
              type: 'primary',
              link: true,
              onClick: (e) => {
                e.stopPropagation()
                row.onMoveDown?.(row)
              },
            },
            () => h(ElIcon, null, () => h(ArrowDown)),
          ),
        ],
      ),
  },
  {
    prop: 'status',
    label: '状态',
    minWidth: 100,
    align: 'center',
    render: (row) =>
      h(
        ElTag,
        {
          type: row.status === '1' ? 'success' : 'danger',
        },
        () => (row.status === '1' ? '启用' : '禁用'),
      ),
  },
  {
    prop: 'createOn',
    label: '创建时间',
    minWidth: 180,
    align: 'center',
    render: (row) => {
      if (!row.createOn) return '-'
      const date = new Date(row.createOn)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
    },
  },
  {
    prop: 'updateOn',
    label: '修改时间',
    minWidth: 180,
    align: 'center',
    render: (row) => {
      if (!row.updateOn) return '-'
      const date = new Date(row.updateOn)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-')
    },
  },
]
